<template>
    <div class="radio-group">
        <div class="radio"
             :class="{active:radio.value === current}"
             v-for="(radio,index) in radios"
             :key="index"
             @click="handleChange(radio)">
            {{radio.title}}
        </div>
    </div>
</template>
 
<script>
export default {
    name: "radioGroup",
    props: {
        radios: {
            type: Array,
            default () {
                return [
                    { title: '按钮1', value: 'radio1' },
                    { title: '按钮1', value: 'radio2' },
                    { title: '按钮1', value: 'radio3' },
                ]
            }
        }
    },
    data () {
        return {
            current: 'excel'
        };
    },
    computed: {},
    methods: {
        handleChange (radio) {
            this.current = radio.value
            this.$emit('change', radio)
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.radio-group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .radio {
        cursor: pointer;
        padding: 0 20px;
        border-radius: 15px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #888;
        margin: 0 20px;
    }

    .active {
        background: #07c160;
        color: #fff;
        border: 1px solid #07c160;
    }
}
</style>
